<template>
	<div id="myroot">
		<div class="bg" style=""></div>
		<van-nav-bar title="我的足迹" fixed >
			<van-icon name="arrow-left" slot="left" color="black" @click="$router.go(-1)"/>
			<div slot="right" @click="onClickRight">{{actionTitle}}</div>
		</van-nav-bar>
	    <div id="container">
	    	<van-list v-model="loading">
		    	<van-row  type="flex" justify="space-around">
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" v-if="checkShow" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
						    <van-checkbox v-model="radio" v-if="checkShow" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" v-if="checkShow" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				</van-row>

				<!-- <van-row  type="flex" justify="space-around">
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
						    <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				</van-row>

				<van-row  type="flex" justify="space-around">
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
						    <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				</van-row>

				<van-row  type="flex" justify="space-around">
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
						    <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				</van-row>

				<van-row  type="flex" justify="space-around">
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
						    <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				</van-row>

				<van-row  type="flex" justify="space-around">
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
						    <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				</van-row>

				<van-row  type="flex" justify="space-around">
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
						    <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				</van-row>

				<van-row  type="flex" justify="space-around">
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
						    <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				</van-row>

				<van-row  type="flex" justify="space-around">
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
						    <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				  <van-col span="8">
				  	<div class="box">
				  		<img src="/static/img/good.png" alt="">
				  		<div class="price">
				  			<span>￥79.9</span>
				  		</div>
				  		<div class="radio">
				  			 <van-checkbox v-model="radio" checked-color="#ff5555"></van-checkbox>
				  		</div>
				  	</div>
				  </van-col>
				</van-row> -->
			</van-list>
	    </div>
	    <van-submit-bar
		  button-text="删除"
		  v-if="checkShow"
		>
		<van-checkbox v-model="checked"  style="margin-left:10px" checked-color="#ff5555">全选</van-checkbox>
		</van-submit-bar>
	</div>
</template>

<script>
    export default {
        name: "myroot",
        data() {
        	return {
        		checked: true,
        		radio: '',
        		loading: true,
        		actionTitle:'编辑',
        		checkShow: false,
        	}
        },
        methods: {
        	onClickRight() {
	            // this.$toast('完成');
	            this.checkShow=!this.checkShow;
	            this.actionTitle=this.checkShow===false?'编辑':'完成';
	            this.action=this.checkShow===false?false:true;
	        }
        }
    }
</script>

<style scoped>
	#myroot{
		font-size: 1rem;
		color: #000000;
		font-family: PingFang-SC-Medium;
		background-color: #ededed;
	}
	#container{
		padding: 0.5rem;
		margin-top: 40px;
		margin-bottom: 40px;
	}
	.box{
		margin: 0.4rem 0.2rem;
		position: relative;
	}
	.box>img{
		width: 100%;
		height: 100%;
		border-radius:5px
	}

	.box>.price{
		text-align: left;
	    color: #fe0000;;
	}

	.box>.radio{
		position: absolute;
		left: 0.4rem;
		top: 0.4rem;
	}
	
</style>